<template>
  <div>
    <DesignCSCommon />
    <DesignCSFormField />
    <DesignCSOverlay />
    <DesignCSList />
    <DesignCSNavigation />
  </div>
</template>

<script setup lang="ts">
  import { provide, ref, watch, computed } from 'vue'
  import { useThemeStore } from '@/stores/useThemeStore'
  import DesignCSCommon from './DesignCSCommon.vue'
  import DesignCSFormField from './DesignCSFormField.vue'
  import DesignCSList from './DesignCSList.vue'
  import DesignCSNavigation from './DesignCSNavigation.vue'
  import DesignCSOverlay from './DesignCSOverlay.vue'

  const themeStore = useThemeStore()
  interface Props {
    value?: Record<string, any> | null
  }

  const props = withDefaults(defineProps<Props>(), {
    value: null,
  })

  // 提供 colorScheme 给子组件
  provide(
    '$colorScheme',
    computed(() => props.value)
  )

  //监听变化并预览
  watch(
    () => themeStore.TempTheme,
    () => {
      themeStore.PreviewTheme()
    },
    { deep: true }
  )
</script>
